<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div id="app">       
        <h1>热卖书籍</h1>
        <input type="button" value="基本上事件绑定" v-on:click="fn01" >
        <br/>
        <input type="button" value="绑定事件，调用时传参数" v-on:click="fn02('hello')" >
        <hr/>
        <!-- 在事件处理函数里获取事件对象
            在vue框架里，提供了$event表示事件对象，如果说，事件处理函数里没有参数，那么，vue框架会默认传入$event。
        -->
        <input type="button" value="获取事件对象（无参）" v-on:click="fn03">
        <input type="button" value="获取事件对象（无参）" v-on:click="fn03($event)">
        <input type="button" value="获取事件对象（有参）" v-on:click="fn04($event,'hi')">
        <input type="button" value="获取事件对象（有参）" v-on:click="fn05('hi',$event)">
        <!-- vue事件处理函数里的this：都是vue对象本身 -->
        <input type="button" value="事件处理函数里的this" v-on:click="fn06">

    </div>
</body>

</html>
<script src="./js/vue2.js"></script>
<script>
    // 

    let vm = new Vue({
        el: "#app",
        data: {
            
        },
        methods:{
            fn01(){
                console.log("hello fn01");
            },
            fn02(str){
                console.log("str",str);
            },
            fn03(e){
                console.log("e",e);
            },
            fn04(e,str){
                console.log("e",e);
                console.log("str",str);
            },
            fn05(str,e){
                console.log("e",e);
                console.log("str",str);
            },
            fn06(){
                console.log("fn06里的this",this);
            }
        }
    });


</script>